<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{:config('base.web_site_title')}</title>
    <link rel="stylesheet" href="__LAYUI__css/layui.css">
    <style>
        .layui-tab-delete:hover {
            background-color: #FF5722;
            color: #FFFFFF;
            border-radius: 50%;
        }

        .layui-tab-title li:hover {
            border-top: 1px solid #000;
            background-color: #f6f6f6;
        }

        .layui-tab-title .layui-this {
            border-top: 1px solid #000;
            background-color: #f6f6f6;
        }

        .layui-tab-title li {
            border: 1px solid #f6f6f6;
            border-left: 0px;
            min-width: 0px;
        }

        .layui-left-15 {
            margin-left: 15px;
        }

        .layui-tab-title .layui-b {
            font-weight: bold;
        }

        .layui-show {
            height: 100%;
        }

        .layui-layout-admin .layui-body {
            bottom: 40px !important;
        }

        .layui-tab {
            height: 97%;
        }

        .layui-tab-content {
            height: 89%;
        }

        .j-icon {
            font-size: 16px;
        }
        .layui-logo ul li{
            margin-top:2px;
        }
        .layui-logo {
            min-width:30px;
            line-height: 30px!important;
        }
        .layui-side{
            min-width: 15px;
        }
    </style>
</head>
<body class="layui-layout-body" lay-filter="loadingBody">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">
            <ul>
                <li><img src="{:set_file_domain(config('base.logo'))}" alt="" width="30px"></li>
                <li>{:config('base.web_site_title')}</li>
            </ul>
        </div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-left" lay-filter="headerL">
            <li class="layui-nav-item closeMenu"><i class="layui-icon">&#xe668;</i></li>
            <li class="layui-nav-item layui-left-15 gohome"><i class="layui-icon">&#xe7ae;</i></li>
            <li class="layui-nav-item layui-left-15 refresh"><i class="layui-icon">&#xe9aa;</i></li>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <!-- <li class="layui-nav-item">
                 <a lay-href="app/message/index.html"  lay-text="消息中心">
                     <i class="layui-icon layui-icon-notice"></i>
                     <span class="layui-badge-dot"></span>
                 </a>
             </li>
             <li class="layui-nav-item layui-left-15">
                 <i class="layui-icon layui-icon-delete j-icon"></i>
             </li>-->
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="{:session('system_user.avatar')}" class="layui-nav-img">
                    {:session('system_user.nickname')}
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="">基本资料</a></dd>
                    <dd><a href="{:url('admin/login/logout')}">安全退出</a></dd>
                </dl>
            </li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="left" lay-shrink="all">
                {tag:menu /}
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <div class="layui-tab" lay-filter="demo" lay-separator=",">
            <ul class="layui-tab-title">
                <li class="layui-this" lay-id="0"><i class="layui-icon layui-b">&#xe68e;</i></li>
            </ul>
            <!-- <ul class="rightmenu" style="display: none;position: absolute;">
                 <li data-type="refresh">刷新</li>
                 <li data-type="closeOthers">关闭其他</li>
                 <li data-type="closeRight">关闭右侧所有</li>
                 <li data-type="closeAll">关闭所有</li>
             </ul>-->
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <iframe data-frameid="id" id="_0" scrolling="auto" frameborder="0"
                            src="{:default_iframe_action()}"
                            style="width:100%;height:100%;margin-left: 1px;"></iframe>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        <a href="https://www.moyuu.cn">© moyuu.com</a> 版权所有
    </div>
</div>
</body>
<script type="application/javascript" src="__LAYUI__layui.js"></script>
<script>
    var loading;
    window.onload = function(){
        layui.layer.close(loading);
    }
    layui.use(['element', 'layer'], function () {
        var $ = layui.jquery
            , layer = layui.layer
            , element = layui.element;

        loading = layui.layer.load(2);
        //点击左侧菜单添加选项卡
        $(document).on('click', '.site-demo-active', function () {
            //加载层初始化
            let othis = $(this), id = othis.attr('lay-id');

            //检测是否已有此选项卡
            ele = 'li[lay-id=' + othis.attr('lay-id') + ']';
            if ($(ele).length < 1) {
                loading = layer.load(2)
                //没有则添加
                let iframe = '<iframe data-frameid="id" id="_' + id + '" scrolling="auto" frameborder="0" src="' + othis.attr('lay-href') + '" style="width:100%;height:100%;margin-left: 1px;"></iframe>';
                element.tabAdd('demo', {
                    title: othis.html() + '&nbsp;&nbsp;<i class="layui-icon layui-tab-delete">&#x1006;</i>  ',
                    id: id,
                    content: iframe
                });
                element.tabChange('demo', id);
                iframe = document.getElementById('_' + id);

                if (iframe.attachEvent) {
                    iframe.attachEvent("onload", function () {
                        layer.closeAll();
                    });
                } else {
                    iframe.onload = function () {
                        layer.closeAll();
                    };
                }
            } else {
                element.tabChange('demo', id);
            }

        });

        //删除选项卡
        $(document).on('click', '.layui-tab-delete', function () {
            var othis = $(this);
            console.log(othis.parent().attr('lay-id'));
            element.tabDelete('demo', othis.parent().attr('lay-id'));
        });

        //监听tab切换
        element.on('tab(demo)', function (data) {
            var iframe = $(".layui-tab-item.layui-show").find("iframe");
            /*var index = layer.msg('Loading......', {
                icon:16,
                shade: [0.1,'#000000'], //0.1透明度的白色背景
                area:[iframe.height,iframe.width],
                offset:[iframe.offsetX,iframe.offsetY]
            });*/
            iframe.attr("src", iframe.attr('src'));
            iframe.load(function () {
                // layer.close(index);
            });
        });

        //关闭菜单
        $(document).on('click', '.closeMenu', function () {
            var that = $(this);
            that.children('i').html('&#xe66b;');
            that.removeClass('closeMenu').addClass('showMenu');
            $('.layui-side').css('width','30px');
            $('.layui-side li a').css('padding','0 10px')
            $('.layui-body').css('left', '30px');
            $('.layui-footer').css('left', '30px');
            $('.layui-logo').css('width','30px');
            $('.layui-logo').find('li').eq(1).hide();
            $('.layui-logo').find('li').eq(0).css('line-height','55px');
            $('.layui-layout-left').css('left','30px');
        });

        //展开菜单
        $(document).on('click', '.showMenu', function () {
            var that = $(this);
            that.children('i').html('&#xe668;');
            that.addClass('closeMenu').removeClass('showMenu');
            $('.layui-side').removeAttr('style')
            $('.layui-tab').removeAttr('style');
            $('.layui-layout-left').removeAttr('style');
            $('.layui-logo').removeAttr('style');
            $('.layui-side li a').removeAttr('style');
            $('.layui-body').removeAttr('style');
            $('.layui-footer').removeAttr('style');
            $('.layui-logo').find('li').eq(1).show();
            $('.layui-logo').find('li').eq(0).removeAttr('style');
        });

        //去前台
        $(document).on('click', '.gohome', function () {
            window.open('/index/index/index');
        });

        //刷新当前的iframe
        $(document).on('click', '.refresh', function () {
            var index = layer.msg('Loading......', {
               icon:16,
               shade: [0.1,'#000000'], //0.1透明度的白色背景
           });
            // alert($(".layui-tab-item.layui-show").find("iframe").attr('src'));
            $(".layui-tab-item.layui-show").find("iframe").attr('src',$(".layui-tab-item.layui-show").find("iframe").attr('src'));
            $(".layui-tab-item.layui-show").find("iframe").load(function(){ layer.close(index);});
        })

        layer.ready(function(){

        })
        /* function frameChange(src,loading,id){
             //获取iframe
             var iframe = document.getElementById("_"+id);
             //iframe改路径
             //给自己加路径属性
             //iframe加载完毕后销毁加载层
             if (iframe.attachEvent) {
                 iframe.attachEvent("onload", function() {
                     layer.closeAll();
                 });
             } else {
                 iframe.onload = function() {
                     layer.closeAll();
                 };
             }
         }*/

        var layid = location.hash.replace(/^#demo=/, '');
        if (layid != '') {
            if ($('.layui-tab-title li[lay-id=' + layid + ']').length > 0) {
                element.tabChange('demo', layid);
            } else {
                //加载层初始化
                let othis = $('a[lay-id=' + layid + ']'), id = othis.attr('lay-id');

                //检测是否已有此选项卡
                ele = 'li[lay-id=' + othis.attr('lay-id') + ']';
                if ($(ele).length < 1) {
                    loading = layer.load(2)
                    //没有则添加
                    let iframe = '<iframe data-frameid="id" id="_' + id + '" scrolling="auto" frameborder="0" src="' + othis.attr('lay-href') + '" style="width:100%;height:100%;margin-left: 1px;"></iframe>';
                    element.tabAdd('demo', {
                        title: othis.html() + '&nbsp;&nbsp;<i class="layui-icon layui-tab-delete">&#x1006;</i>  ',
                        id: id,
                        content: iframe
                    });
                    element.tabChange('demo', id);
                    iframe = document.getElementById('_' + id);

                    if (iframe.attachEvent) {
                        iframe.attachEvent("onload", function () {
                            layer.closeAll();
                        });
                    } else {
                        iframe.onload = function () {
                            layer.closeAll();
                        };
                    }

                } else {
                    element.tabChange('demo', id);
                }
            }
        }

    });
</script>
</html>